<template>
  <div class="zd">
    <!--头部-->
    <div class="zdtp">
      <div class="zdtp-zi">
        <h2>Contact</h2>
        <li class="home">Home.Contact</li>
        <div class="zfx"></div>
      </div>
    </div>
    <!--主体-->
    <div class="zdzt">
      <div class="zdzt-tb">
        <span class="con">Contact With Us Now</span>
        <h3 class="write">Write a Message</h3>
      </div>
      <div class="zdzt-in">
        <input type="text" placeholder="First Name" class="inputs" />
        <input type="text" placeholder="Last Name" class="inputs" />
        <input type="text" placeholder="Email Address" class="inputs" />
        <input type="text" placeholder="Phone Number" class="inputs" />
        <input type="text" placeholder="Write Message" id="inputs-d" />
      </div>
      <div class="zdzt-zh">
        <button class="but">Submit message</button>
        <div class="xk"></div>
      </div>
    </div>
    <!--第二-->
    <div class="zddr">
      <div class="zddr-one">
        <div class="zddr-bt">
          <i class="t-z"></i>
        </div>
        <h4 class="dr-d">About Krowd</h4>
        <p class="ds-s">
          Morbi ut tellus ac leo molestie luctus nec
          <br />
          vehicula sed justo onec tempor rhoncus
          <br />
          volutpat ras lorem.
        </p>
      </div>
      <div class="zddr-one" id="two">
        <div class="zddr-bt">
          <i class="t-z"></i>
        </div>
        <h4 class="dr-d">About Krowd</h4>
        <p class="ds-s">
          66 Road Broklyn Street, 600 New York.
          <br />
          United States of America
          <br />
          P.O Box 0000
        </p>
      </div>
      <div class="zddr-one" id="san">
        <div class="zddr-bt">
          <i class="t-z"></i>
        </div>
        <h4 class="dr-d">Our Address</h4>
        <p class="ds-s">
          needhelp@krowd.com
          <br />
          info@krowd.com
          <br />
          666 888 0000
        </p>
      </div>
    </div>
    <!--最后-->
    <div class="zhyg">
      <div class="zhyg-s">
        <img src="./Contact/google-search.png" />
        <h1 class="h1-bq">
          <a href="#">maps.google.com.hk</a>
        </h1>
        <p class="p-wz">请收藏我们的网址</p>
      </div>
    </div>
    <!--底部-->
    <div class="footerr">翻译</div>
    <div class="footer-zh">©2011 - ICP证合字B2-20070004号</div>
  </div>
</template>

<script>
export default {}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  list-style: none;
  border: none;
  outline: none;
}
.zd {
  width: 100%;
  height: 1950px;
}
.zdtp {
  width: 100%;
  height: 330px;
  float: left;
  background-image: url('./Contact/a1.jpg');
  background-repeat: no-repeat;
  .zdtp-zi {
    width: 1000px;
    height: 330px;
    float: left;
    margin-left: 270px;
    color: white;
    h2 {
      width: 200px;
      height: 70px;
      font-size: 40px;
      margin-top: 130px;
      margin-left: -250px;
    }
    .home {
      width: 48px;
      height: 26px;
      margin-left: 870px;
      margin-top: -60px;
    }
    .zfx {
      width: 37px;
      height: 37px;
      background-color: rgb(4, 235, 200);
      margin-top: 126px;
      margin-left: -250px;
    }
  }
}
.zdzt {
  width: 100%;
  height: 850px;
  float: left;
  .zdzt-tb {
    width: 1200px;
    height: 145px;
    margin-top: 100px;
    margin-left: 100px;
    .con {
      width: 185px;
      height: 100px;
      color: #674df0;
      margin-left: 40%;
      font-size: 18px;
    }
    .write {
      font-size: 50px;
      padding-top: 6px;
      margin-left: 350px;
    }
  }
  .zdzt-in {
    width: 770px;
    height: 350px;
    float: left;
    margin-left: 420px;
    .inputs {
      width: 370px;
      height: 70px;
      font-size: 17px;
    }
    #inputs-d {
      width: 770px;
      height: 140px;
      font-size: 17px;
    }
  }
  .zdzt-zh {
    width: 770px;
    height: 70px;
    float: left;
    position: relative;
    margin-left: 510px;
    .but {
      width: 260px;
      height: 70px;
      position: relative;
      background-color: rgb(32, 226, 181);
      cursor: pointer;
      font-size: 20px;
      &:hover {
        transition: all 0.3s;
        background-color: #000;
        color: #fff;
      }
    }
    .xk {
      width: 17px;
      height: 17px;
      position: absolute;
      background-color: black;
      margin-top: -70px;
      margin-left: 243px;
      z-index: 20;
    }
  }
}
.zddr {
  width: 100%;
  height: 360px;
  float: left;
  margin-top: -90px;
  .zddr-one {
    width: 400px;
    height: 360px;
    float: left;
    margin-left: 13px;
    background-color: #6f42c1;
    .zddr-bt {
      width: 130px;
      height: 130px;
      position: relative;
      border-radius: 80px;
      margin-left: 30px;
      background-color: #6610f2;
      .t-z {
        width: 90px;
        height: 90px;
        position: absolute;
        background-image: url('./Contact/a2.jpg');
        background-repeat: no-repeat;
        z-index: 10;
        margin-left: 20px;
        margin-top: 22px;
      }
    }

    .dr-d {
      width: 460px;
      height: 28px;
      font-size: 30px;
      color: white;
      margin-left: 40px;
      margin-top: 30px;
    }
    .ds-s {
      width: 460px;
      height: 130px;
      color: white;
      font-size: 20px;
      margin-top: 40px;
      margin-left: 20px;
    }
  }
  #two {
    background-color: black;
  }
  #san {
    background-color: rgb(4, 235, 200);
  }
}
.zhyg {
  width: 100%;
  height: 420px;
  float: left;
  .zhyg-s {
    width: 650px;
    cursor: pointer;
    height: 357px;
    float: left;
    border-radius: 50px;
    border: 1px solid #ccc;
    margin-left: 300px;
    margin-top: 30px;
    img {
      width: 560px;
      height: 250px;
      margin-left: 45px;
    }
    .h1-bq {
      width: 650px;
      height: 28px;
      text-align: center;
      a {
        font-size: 20px;
        color: blue;
      }
    }
    .p-wz {
      width: 650px;
      height: 19px;
      font-size: 10px;
      text-align: center;
      margin-top: 30px;
    }
  }
}
.footerr {
  width: 100%;
  height: 20px;
  color: blue;
  text-align: center;
  cursor: pointer;
}
.footer-zh {
  width: 100%;
  height: 20px;
  font-size: 10px;
  float: left;
  margin-top: 30px;
  text-align: center;
}
</style>
